<template >
	<li class="list-footer">
		<span class="sp1"> {{itemfalse}} items left </span>
		<span class="sp2">   
			<span id="all" class="sp-myall" @click="updatetype(1)" :class="{'sp2-checked':list_type==1}" > All </span>
			<span id="active" @click="updatetype(2)" :class="{'sp2-checked':list_type==2}"> Active </span>
			<span id="completed" @click="updatetype(3)" :class="{'sp2-checked':list_type==3}"> Completed </span>
		</span>
		<span class="sp3" @click="childclear" > Clear completed</span>
	</li> 
</template>

<script>
export default {
	name:'myfooter',
	props:['itemfalse','type'],
	data:function(){
		return {
			list_type:this.type
		}
	},
	methods:{
		updatetype (type) {
	      this.list_type = type
	      console.log(this.list_type)
	      this.$emit("listenchild",type)
	    },
	    childclear(){
	    	this.$emit("clearcheck")
	    }
	    
	}
}
</script>

<style>

</style>
